<!-- 岗位管理 -->
<template>
    <div>
        <el-form :inline="true">
            <el-form-item label="岗位名称">
                <el-input v-model="searchMap.name" placeholder="请输入"></el-input>
            </el-form-item>

            <el-form-item label="岗位编码">
                <el-input v-model="searchMap.code" placeholder="请输入"></el-input>
            </el-form-item>

            <el-form-item label="状态">
                <el-select v-model="searchMap.status" clearable>
                    <el-option v-for="item in lists" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>

            <el-button type="primary" @click="fetchData()">查询</el-button>
            <el-button type="primary" @click="handleEdit('')">新增</el-button>
        </el-form>

        <el-table :data="tableData" border stripe style="width: 100%">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="id" label="序号"> </el-table-column>
            <el-table-column prop="name" label="岗位名称"> </el-table-column>
            <el-table-column prop="code" label="岗位编码"> </el-table-column>
            <el-table-column prop="remark" label="备注"></el-table-column>
            <el-table-column prop="status" label="部门状态">
                <template scope="scope">
                    <el-button type="primary" v-if="scope.row.status === 0"
                        @click="updateStatus(scope.row.id,scope.row.status)">启用</el-button>
                    <el-button type="warning" v-if="scope.row.status === 1"
                        @click="updateStatus(scope.row.id,scope.row.status)">禁止</el-button>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click="handleEdit(scope.row.id)" type="text" size="small">修改</el-button>
                    <el-button @click="handleDelete(scope.row.id)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <el-pagination @size-change="sizeData" @current-change="pageData" :page-sizes="[5, 10, 20, 30, 60]"
            :page-size="5" layout="total, sizes, prev, pager, next, jumper" :total="count">
        </el-pagination>

        <el-dialog title="编辑" :visible.sync="dialogFormVisible">
            <el-form label-width="80px">

                <el-row>
                    <el-col span="11">
                        <el-form-item label="岗位名称"><el-input v-model="position.name" /></el-form-item>
                    </el-col>
                    <el-col span="11">
                        <el-form-item label="岗位编号"><el-input v-model="position.code" /></el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col span="11">
                        <el-form-item label="备注"><el-input type="textarea" v-model="position.remark" /></el-form-item>
                    </el-col>
                    <el-col span="11">
                        <el-form-item label="是否启用">
                            <el-radio-group v-model="position.status">
                                <el-radio :label="0">启用</el-radio>
                                <el-radio :label="1">禁用</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item>
                    <el-button type="primary" @click="handleSave()" style="margin-left: 240px">保存</el-button>
                    <el-button @click="dialogFormVisible = false" style="margin-left: 10px">关闭</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
  
  <script>
  import positionmentService from "@/api/position";
  
  export default {
    data() {
      return {
        tableData: [],
        lists:[
            {
                label:"启用",
                value:"0",
            },
            {
                label:"禁用",
                value:"1",
            }
        ],
        statusList:{status:'',id:''},
        dialogFormVisible: false,
        id: "",
        position: {},
        searchMap: {
          limit: 5,
          page: 1,
          name: "",
          code: "",
          positionType: "",
        },
        //记录总数
        count: 0,
      };
    },
    //钩子函数
    created() {
      this.findAll();
      this.fetchData();
    },
    methods: {
    
      //修改或新增
      handleEdit(id) {
  
        this.id=id;
  
        //打开弹窗
        this.dialogFormVisible = true;
  
        if(id !== ''){
  
          //根据id查询数据绑定到模型上面
          positionmentService.find(id).then(response => {
  
            //回显
            this.position = response.data
  
            //回显图片
            // this.imageUrl = this.pojo.image
  
          })
  
        } else {
  
          //清除之前模型的脏数据
          this.position = {
  
          }
  
          this.imageUrl = ''
        }
      },
  
      //新增和修改的提交
      handleSave() {
        positionmentService.update(this.id, this.position).then((response) => {
          //新增或者修改成功
          this.$message({
            message: response.msg,
            type: "success",
          });
  
          //重新加载列表的数据
          this.fetchData();
  
          //关闭弹窗
          this.dialogFormVisible = false;
        });
      },
  
      //查询数据
      fetchData() {
        positionmentService.list(this.searchMap).then((response) => {
          this.tableData = response.data;
          this.count = response.count;
        });
      },
      //当页面大小改变的时候调用此方法，传递改变的页面大小
      sizeData(size) {
        this.searchMap.limit = size;
        this.fetchData();
      },
      pageData(page) {
        this.searchMap.page = page;
        this.fetchData();
      },
      
  
      //查询所有部门
      findAll(){
        positionmentService.findAll().then(response=>{
          this.list=response.data
        })
      },
  
      //点击修改状态
      updateStatus(id,status) {
        this.$confirm('您确定要修改状态吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if (status === 0) {
              status = 1
            } else {
              status = 0
            }
          this.statusList.status=status
          this.statusList.id=id
          positionmentService.update(id,this.statusList).then(response => {
            this.$message({
              type: 'success',
              message: '修改状态成功!'
            });
  
            this.fetchData()
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消修改'
            });
          });
        })
  
      },
            
  
      //删除
      handleDelete(id){
        this.$confirm('您确定要删除吗, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
  
            positionmentService.remove(id).then(response=>{
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
  
              this.fetchData()
  
            })
          
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });          
          });
      }
    },
  };
  </script>
  